/* 通用css */
.pushtag,.newtag,.hottag{border:1px solid #41a863;border-radius: 4px;font-size:12px;padding: 2px;background: #41a863;color:#fff}
.newtag{background: #fcc52e;border-color:#fcc52e}
.hottag{background: #f33f5a;border-color:#f33f5a}
.uni-list-bar{border-bottom:5px solid #f8f8f8;}
.gui-padding-m{padding:10px;}
.fb{font-weight:600;}
.demo-banner{height:230rpx;}
.demo-space{height:30rpx;}
.demo-title{height:60rpx;}
.demo-tag{width:126rpx;height:30rpx;}
.demo-grid{width:126rpx;height:126rpx;}
.demo-card{width:330rpx;height:188rpx;}
.demo-wall{width:375rpx;height:30rpx;}
.demo-img{width:94px;height:70px;border-radius:6px;}
.demo-bg{background-color:#EFF1F6;overflow:hidden;}
.demo-bg:after{content:'';display:block;width:100%;height:100%;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,0.335),transparent);animation:loading 1.5s infinite;}
.f-fl{float:left;}
.f-fl{float:left;}
.mainbg{background:#fc2952!important;color:#fff!important;}
.mainbg1{background:#067bef!important;color:#fff!important;}
.mainbg2{background:#18a058!important;color:#fff!important;}
.mainbg .count,.mainbg1 .count,.mainbg2 .count,.flex1{flex:1}
.flex-wrap{flex-wrap:wrap;}
.flex{display:flex;}
.flex-c{flex-direction:column;}
.flex-r{flex-direction:row;}
.align-items{align-items:center;}
.justify-content-center{justify-content:center;}
.justify-content-between{justify-content:space-between;}
.justify-content-around{justify-content: space-around;}
.w100{width:100%;}
.red{color:#fa2952!important;}
.cof{color:#fff!important;}
.yellow{color:#f3ce32!important}
.textunline{text-decoration:underline!important;}
.textdel{text-decoration:line-through!important;}
.fz10{font-size:10px!important;}
.fz11{font-size:11px!important;}
.fz12{font-size:12px!important;}
.fz13{font-size:13px!important;}
.fz14{font-size:14px!important;}
.fz15{font-size:15px!important;}
.fz16{font-size:16px!important;}
.fz18{font-size:18px!important;}
.fz20{font-size:20px!important;}
.fz22{font-size:22px!important;}
.fz24{font-size:24px!important;}
.fz28{font-size:28px!important;}
.fz32{font-size:32px!important;}
.fz36{font-size:36px!important;}
.fz48{font-size:48px!important;}
.mt1{margin-top:1px!important;}
.mt2{margin-top:2px!important;}
.mt3{margin-top:3px!important;}
.mt4{margin-top:4px!important;}
.mt5{margin-top:5px!important;}
.mt6{margin-top:6px!important;}
.mt8{margin-top:8px!important;}
.mt10{margin-top:10px!important;}
.mt15{margin-top:15px!important;}
.mt20{margin-top:20px!important;}
.mb5{margin-bottom:5px!important;}
.mb10{margin-bottom:10px!important;}
.mb15{margin-bottom:15px!important;}
.mb20{margin-bottom:20px!important;}
.mr2{margin-right:2px!important;}
.mr3{margin-right:3px!important;}
.mr4{margin-right:4px!important;}
.mr5{margin-right:5px!important;}
.mr10{margin-right:10px!important;}
.mr15{margin-right:15px!important;}
.mr20{margin-right:20px!important;}
.ml2{margin-left:2px!important;}
.ml3{margin-left:3px!important;}
.ml4{margin-left:4px!important;}
.ml5{margin-left:5px!important;}
.ml10{margin-left:10px!important;}
.ml15{margin-left:15px!important;}
.ml20{margin-left:20px!important;}
.pr{position:relative}
.pa{position:absolute}
.pf{position:fixed}
.ps{position: sticky;top:0;z-index:10}
.fw,fb{font-weight:bold!important;}
.tp1{top:1px}
.tp2{top:2px}
.tp3{top:3px}
.tp4{top:4px}
.tp5{top:5px}
.ftp1{top:-1px}
.ftp2{top:-2px}
.ftp3{top:-3px}
.ftp4{top:-4px}
.ftp5{top:-5px}
.l1{left:1px}
.l2{left:2px}
.l3{left:3px}
.l4{left:4px}
.l5{left:5px}
.fl1{left:-1px}
.fl2{left:-2px}
.fl3{left:-3px}
.fl4{left:-4px}
.fl5{left:-5px}
@keyframes loading {
100%{
	transform: translateX(100%);
}
}
/* 组件演示列表 */
.gui-components-list{
padding:5rpx 30rpx;
}
.gui-components-list-title{
padding:32rpx 0;
font-size:30rpx;
}
.gui-components-list-text{
font-size:34rpx;
}
.gui-components-list-icon{
font-size:38rpx;
}


/* 动态渐变头部导航 */
.custom-header-bg{background-color:rgba(0, 0, 0, 0.6);}

/* 切换导航样式 */
.custom-switch-nav-border{border-color:#189f4b !important;}


/* 深色模式 */
/* #ifndef APP-NVUE */
@media (prefers-color-scheme: dark){
.custom-switch-nav-border{border-color:#888888 !important;}
}
/* #endif */



// 默认加入 scoped ，所以外面加一层提升权重
.list .uni-list--waterfall .uni-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
box-sizing: border-box;
}

// h5 和 app-vue 使用深度选择器，因为默认使用了 scoped ，所以样式会无法穿透
.list .uni-list--waterfall .uni-list .uni-list-item--waterfall {
width: 48%;
box-sizing: border-box;
}

.list .uni-list--waterfall .uni-list-item__container {
flex-direction: column!important;
display: block!important;
overflow: inherit;
}

.list .uni-list--waterfall .uni-list-item__container .shop-picture-column{
height: 220rpx;
}

.sharebox{
height: 26px;
width: 80px;
line-height: 26px;
text-align: center;
border-radius: 20px;
border: 1px solid #FF632A;
color: #ff4400;
}



.markdown-body{color:#373737;font-family:PingFang SC,Avenir,Tahoma,Arial,Lantinghei SC,Microsoft Yahei,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,Helvetica,sans-serif;font-size:inherit;word-spacing:.125rem}
.markdown-body p{line-height:1.8;margin:0 0 1.25rem}
.markdown-body::-moz-selection{background-color:#e0efe2!important;color:#0a0b0c!important}
.markdown-body::selection{background-color:#e0efe2!important;color:#0a0b0c!important}
.markdown-body h1:hover .anchor .octicon-link:before,.markdown-body h2:hover .anchor .octicon-link:before,.markdown-body h3:hover .anchor .octicon-link:before,.markdown-body h4:hover .anchor .octicon-link:before,.markdown-body h5:hover .anchor .octicon-link:before,.markdown-body h6:hover .anchor .octicon-link:before{background-color:currentColor;content:" ";display:inline-block;height:1rem;-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 0 0 1.06 1.06l1.25-1.25a2 2 0 1 1 2.83 2.83l-2.5 2.5a2 2 0 0 1-2.83 0 .75.75 0 0 0-1.06 1.06 3.5 3.5 0 0 0 4.95 0l2.5-2.5a3.5 3.5 0 0 0-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 0 1 0-2.83l2.5-2.5a2 2 0 0 1 2.83 0 .75.75 0 0 0 1.06-1.06 3.5 3.5 0 0 0-4.95 0l-2.5 2.5a3.5 3.5 0 0 0 4.95 4.95l1.25-1.25a.75.75 0 0 0-1.06-1.06l-1.25 1.25a2 2 0 0 1-2.83 0z"/></svg>');mask-image:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 0 0 1.06 1.06l1.25-1.25a2 2 0 1 1 2.83 2.83l-2.5 2.5a2 2 0 0 1-2.83 0 .75.75 0 0 0-1.06 1.06 3.5 3.5 0 0 0 4.95 0l2.5-2.5a3.5 3.5 0 0 0-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 0 1 0-2.83l2.5-2.5a2 2 0 0 1 2.83 0 .75.75 0 0 0 1.06-1.06 3.5 3.5 0 0 0-4.95 0l-2.5 2.5a3.5 3.5 0 0 0 4.95 4.95l1.25-1.25a.75.75 0 0 0-1.06-1.06l-1.25 1.25a2 2 0 0 1-2.83 0z"/></svg>');width:1rem}
.markdown-body details,.markdown-body figcaption,.markdown-body figure{display:block}
.markdown-body summary{display:list-item}
.markdown-body [hidden]{display:none!important}
.markdown-body a{background-color:transparent;margin:0 .25rem;text-decoration:underline;-webkit-transition:color .25s;transition:color .25s}
.markdown-body a:active,.markdown-body a:hover{color:#0f306e}
.markdown-body abbr[title]{border-bottom:none;text-decoration:underline dotted}
.markdown-body b,.markdown-body strong{font-weight:600}
.markdown-body dfn{font-style:italic}
.markdown-body h1{font-size:2em;font-weight:600;margin:.67em 0;padding-bottom:.3em}
.markdown-body mark{background-color:#fff8c5;color:#24292f}
.markdown-body small{font-size:90%}
.markdown-body sub,.markdown-body sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
.markdown-body sub{bottom:-.25em}
.markdown-body sup{top:-.5em}
.markdown-body img{background-color:#fff;border-style:none;box-sizing:content-box;max-width:100%}
.markdown-body code,.markdown-body kbd,.markdown-body pre,.markdown-body samp{word-spacing:0}
.markdown-body figure{margin:1em 2.5rem}
.markdown-body hr{background-color:var(--el-border-color);border:0;box-sizing:content-box;height:.0625rem;margin:3.125rem 0;overflow:hidden;padding:0}
.markdown-body input{font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible}
.markdown-body [type=button],.markdown-body [type=reset],.markdown-body [type=submit]{-webkit-appearance:button}
.markdown-body [type=button]::-moz-focus-inner,.markdown-body [type=reset]::-moz-focus-inner,.markdown-body [type=submit]::-moz-focus-inner{border-style:none;padding:0}
.markdown-body [type=button]:-moz-focusring,.markdown-body [type=reset]:-moz-focusring,.markdown-body [type=submit]:-moz-focusring{outline:.0625rem dotted ButtonText}
.markdown-body [type=checkbox],.markdown-body [type=radio]{box-sizing:border-box;padding:0}
.markdown-body [type=number]::-webkit-inner-spin-button,.markdown-body [type=number]::-webkit-outer-spin-button{height:auto}
.markdown-body [type=search]{-webkit-appearance:textfield;outline-offset:-.125rem}
.markdown-body [type=search]::-webkit-search-cancel-button,.markdown-body [type=search]::-webkit-search-decoration{-webkit-appearance:none}
.markdown-body::-webkit-input-placeholder{color:inherit;opacity:.54}
.markdown-body::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
.markdown-body hr:after,.markdown-body hr:before{content:"";display:table}
.markdown-body hr:after{clear:both}
.markdown-body table{border-collapse:collapse;border-spacing:0;display:block;font-size:85%;line-height:1.8;max-width:100%;overflow:auto;width:-webkit-max-content;width:-moz-max-content;width:max-content}
.markdown-body td,.markdown-body th{padding:0}
.markdown-body details summary{cursor:pointer}
.markdown-body kbd{background-color:#f6f8fa;border:.0625rem solid rgba(175,184,193,.2);border-radius:.375rem;box-shadow:inset 0 -.0625rem #afb8c133;color:#24292f;display:inline-block;font:.6875rem ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;line-height:.625rem;padding:.1875rem .3125rem;vertical-align:middle}
.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6{border-bottom:0;color:#323232;font-family:sohne,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:600;line-height:1.25;margin-bottom:1.25rem!important;margin-top:1.5rem}
.markdown-body h2{font-size:1.5rem;font-weight:600;margin:3.75rem 0 1.625rem!important}
.markdown-body h3{font-size:1.375rem;line-height:1.75rem;margin:3.75rem 0 1rem!important}
.markdown-body h4{font-size:1.25rem;line-height:1.5rem;margin:2.5rem 0 .625rem!important}
.markdown-body h5{margin:1.875rem 0 .625rem!important}
.markdown-body h5,.markdown-body h6{font-size:.875rem;line-height:1.5rem}
.markdown-body h6{margin:1.25rem 0 .625rem!important}
.markdown-body blockquote{border-left:.375rem solid #cbd5e1;font-style:italic;margin:1rem 0;padding-left:1rem;-webkit-transition:border-color .5s;transition:border-color .5s}
.markdown-body ol,.markdown-body ul{margin:1.875rem 0;padding-left:1.85rem}
.markdown-body ul li::marker{color:#cbd5e1}
.markdown-body ol ol,.markdown-body ul ol{list-style-type:lower-roman;margin:1rem 0}
.markdown-body ol ol ol,.markdown-body ol ul ol,.markdown-body ul ol ol,.markdown-body ul ul ol{list-style-type:lower-alpha}
.markdown-body dd{margin-left:0}
.markdown-body code,.markdown-body tt{border-radius:.25rem;color:#c7254e;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:85%;margin:0 .1875rem;-webkit-transition:color .5s,background-color .5s;transition:color .5s,background-color .5s}
.markdown-body .octicon{fill:currentColor;display:inline-block;overflow:visible!important;vertical-align:text-bottom}
.markdown-body::-webkit-input-placeholder{color:#6e7781;opacity:1}
.markdown-body::-moz-placeholder{color:#6e7781;opacity:1}
.markdown-body:-ms-input-placeholder{color:#6e7781;opacity:1}
.markdown-body::placeholder{color:#6e7781;opacity:1}
.markdown-body input::-webkit-inner-spin-button,.markdown-body input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}
.markdown-body .pl-c{color:#6e7781}
.markdown-body .pl-c1,.markdown-body .pl-s .pl-v{color:#0550ae}
.markdown-body .pl-e,.markdown-body .pl-en{color:#8250df}
.markdown-body .pl-s .pl-s1,.markdown-body .pl-smi{color:#24292f}
.markdown-body .pl-ent{color:#116329}
.markdown-body .pl-k{color:#cf222e}
.markdown-body .pl-pds,.markdown-body .pl-s,.markdown-body .pl-s .pl-pse .pl-s1,.markdown-body .pl-sr,.markdown-body .pl-sr .pl-cce,.markdown-body .pl-sr .pl-sra,.markdown-body .pl-sr .pl-sre{color:#0a3069}
.markdown-body .pl-smw,.markdown-body .pl-v{color:#953800}
.markdown-body .pl-bu{color:#82071e}
.markdown-body .pl-ii{background-color:#82071e;color:#f6f8fa}
.markdown-body .pl-c2{background-color:#cf222e;color:#f6f8fa}
.markdown-body .pl-sr .pl-cce{color:#116329;font-weight:700}
.markdown-body .pl-ml{color:#3b2300}
.markdown-body .pl-mh,.markdown-body .pl-mh .pl-en,.markdown-body .pl-ms{color:#0550ae;font-weight:700}
.markdown-body .pl-mi{color:#24292f;font-style:italic}
.markdown-body .pl-mb{color:#24292f;font-weight:700}
.markdown-body .pl-md{background-color:#ffebe9;color:#82071e}
.markdown-body .pl-mi1{background-color:#dafbe1;color:#116329}
.markdown-body .pl-mc{background-color:#ffd8b5;color:#953800}
.markdown-body .pl-mi2{background-color:#0550ae;color:#eaeef2}
.markdown-body .pl-mdr{color:#8250df;font-weight:700}
.markdown-body .pl-ba{color:#57606a}
.markdown-body .pl-sg{color:#8c959f}
.markdown-body .pl-corl{color:#0a3069;text-decoration:underline}
.markdown-body [data-catalyst]{display:block}
.markdown-body g-emoji{font-family:Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:1em;font-style:normal!important;font-weight:400;line-height:1;vertical-align:-.075em}
.markdown-body g-emoji img{height:1em;width:1em}
.markdown-body:after,.markdown-body:before{content:"";display:table}
.markdown-body:after{clear:both}
.markdown-body a:not([href]){color:inherit;text-decoration:none}
.markdown-body .absent{color:#cf222e}
.markdown-body .anchor{float:left;line-height:1;margin-left:-1.25rem;padding-right:.25rem}
.markdown-body .anchor:focus{outline:none}
.markdown-body blockquote,.markdown-body details,.markdown-body dl,.markdown-body ol,.markdown-body pre,.markdown-body table,.markdown-body ul{margin-bottom:1.25rem 0}
.markdown-body h1 .octicon-link,.markdown-body h2 .octicon-link,.markdown-body h3 .octicon-link,.markdown-body h4 .octicon-link,.markdown-body h5 .octicon-link,.markdown-body h6 .octicon-link{color:#24292f;vertical-align:middle;visibility:hidden}
.markdown-body h1:hover .anchor,.markdown-body h2:hover .anchor,.markdown-body h3:hover .anchor,.markdown-body h4:hover .anchor,.markdown-body h5:hover .anchor,.markdown-body h6:hover .anchor{text-decoration:none}
.markdown-body h1:hover .anchor .octicon-link,.markdown-body h2:hover .anchor .octicon-link,.markdown-body h3:hover .anchor .octicon-link,.markdown-body h4:hover .anchor .octicon-link,.markdown-body h5:hover .anchor .octicon-link,.markdown-body h6:hover .anchor .octicon-link{visibility:visible}
.markdown-body h1 code,.markdown-body h1 tt,.markdown-body h2 code,.markdown-body h2 tt,.markdown-body h3 code,.markdown-body h3 tt,.markdown-body h4 code,.markdown-body h4 tt,.markdown-body h5 code,.markdown-body h5 tt,.markdown-body h6 code,.markdown-body h6 tt{font-size:inherit;padding:0 .2em}
.markdown-body ol.no-list,.markdown-body ul.no-list{list-style-type:none;padding:0}
.markdown-body ol[type="1"]{list-style-type:decimal}
.markdown-body ol[type=a]{list-style-type:lower-alpha}
.markdown-body ol[type=i]{list-style-type:lower-roman}
.markdown-body div>ol:not([type]){list-style-type:decimal}
.markdown-body ol ol,.markdown-body ol ul,.markdown-body ul ol,.markdown-body ul ul{margin-bottom:0;margin-top:0}
.markdown-body li{line-height:1.875rem;margin-bottom:.625rem;list-style:decimal-leading-zero;}
.markdown-body li>p{margin-top:1rem}
.markdown-body li+li{margin-top:.25em}
.markdown-body dl{padding:0}
.markdown-body dl dt{font-size:1em;font-style:italic;font-weight:600;margin-top:1rem;padding:0}
.markdown-body dl dd{margin-bottom:1rem;padding:0 1rem}
.markdown-body table th{font-weight:600}
.markdown-body table td,.markdown-body table th{border:.0625rem solid #d0d7de;padding:.375rem .8125rem}
.markdown-body table tr{background-color:#fff;border-top:.0625rem solid #d8dee4}
.markdown-body table tr:nth-child(2n){background-color:#f6f8fa}
.markdown-body table img{background-color:transparent}
.markdown-body img[align=right]{padding-left:1.25rem}
.markdown-body img[align=left]{padding-right:1.25rem}
.markdown-body .emoji{background-color:transparent;max-width:none;vertical-align:text-top}
.markdown-body span.frame{display:block;overflow:hidden}
.markdown-body span.frame>span{border:.0625rem solid #d0d7de;display:block;float:left;margin:.8125rem 0 0;overflow:hidden;padding:.4375rem;width:auto}
.markdown-body span.frame span img{display:block;float:left}
.markdown-body span.frame span span{clear:both;color:#24292f;display:block;padding:.3125rem 0 0}
.markdown-body span.align-center{clear:both;display:block;overflow:hidden}
.markdown-body span.align-center>span{display:block;margin:.8125rem auto 0;overflow:hidden;text-align:center}
.markdown-body span.align-center span img{margin:0 auto;text-align:center}
.markdown-body span.align-right{clear:both;display:block;overflow:hidden}
.markdown-body span.align-right>span{display:block;margin:.8125rem 0 0;overflow:hidden;text-align:right}
.markdown-body span.align-right span img{margin:0;text-align:right}
.markdown-body span.float-left{display:block;float:left;margin-right:.8125rem;overflow:hidden}
.markdown-body span.float-left span{margin:.8125rem 0 0}
.markdown-body span.float-right{display:block;float:right;margin-left:.8125rem;overflow:hidden}
.markdown-body span.float-right>span{display:block;margin:.8125rem auto 0;overflow:hidden;text-align:right}
.markdown-body code br,.markdown-body tt br{display:none}
.markdown-body del code{text-decoration:inherit}
.markdown-body pre>code{background:#fafafa;border:0;color:#282828;font-size:0.875rem;margin:0;padding:0;white-space:pre;word-break:normal}
.markdown-body .highlight{margin-bottom:1rem}
pre code.hljs{overflow-x:visible}
.markdown-body .highlight pre{margin-bottom:0;word-break:normal}
.markdown-body .highlight pre,.markdown-body pre{word-wrap:normal;background-color:var(--code-bg);border-radius:.25rem;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;line-height:1.7;overflow:auto;position:relative;margin:5px 0 20px;}
.markdown-body pre code,.markdown-body pre tt{word-wrap:normal;background-color:#fafafa;border:0;display:block;line-height:inherit;margin:0;overflow:visible;padding:1em}
.markdown-body .csv-data td,.markdown-body .csv-data th{font-size:.75rem;line-height:1;overflow:hidden;padding:.3125rem;text-align:left;white-space:nowrap}
.markdown-body .csv-data .blob-num{background:#fff;border:0;padding:.625rem .5rem .5625rem;text-align:right}
.markdown-body .csv-data tr{border-top:0}
.markdown-body .csv-data th{background:#f6f8fa;border-top:0;font-weight:600}
.markdown-body .footnotes{border-top:.0625rem solid #d0d7de;color:#57606a;font-size:.75rem}
.markdown-body .footnotes ol{padding-left:1rem}
.markdown-body .footnotes li{position:relative}
.markdown-body .footnotes li:target:before{border:.125rem solid #0969da;border-radius:.375rem;bottom:-.5rem;content:"";left:-1.5rem;pointer-events:none;position:absolute;right:-.5rem;top:-.5rem}
.markdown-body .footnotes li:target{color:#24292f}
.markdown-body .footnotes .data-footnote-backref g-emoji{font-family:monospace}
.markdown-body .task-list-item{list-style-type:none}
.markdown-body .task-list-item label{font-weight:400}
.markdown-body .task-list-item.enabled label{cursor:pointer}
.markdown-body .task-list-item+.task-list-item{margin-top:.1875rem}
.markdown-body .task-list-item .handle{display:none}
.markdown-body .task-list-item-checkbox{margin:0 .2em .25em -1.6em;vertical-align:middle}
.markdown-body .contains-task-list:dir(rtl) .task-list-item-checkbox{margin:0 -1.6em .25em .2em}
.markdown-body::-webkit-calendar-picker-indicator{-webkit-filter:invert(50%);filter:invert(50%)}
/*常见布局结构*/
.cc-course-gridbox-nine{
	display: grid;
	grid-column-gap: 10px;
	grid-template-areas: 'a b c '
						 'd e f'
						 'g h i ';
	.imgbox{
		image{width: 100%;height: 90px;}
	}
	
	.list-course-item:nth-child(1){grid-area: a;}
	.list-course-item:nth-child(2){grid-area: b;}
	.list-course-item:nth-child(3){grid-area: c;}
	.list-course-item:nth-child(4){grid-area: d;}
	.list-course-item:nth-child(5){grid-area: e;}
	.list-course-item:nth-child(6){grid-area: f;}
	.list-course-item:nth-child(7){grid-area: g;}
	.list-course-item:nth-child(8){grid-area: h;}
	.list-course-item:nth-child(9){grid-area: i;}
	
}

.cc-course-gridbox-oot{
	display: grid;
	grid-column-gap: 10px;
	grid-template-areas: 'a a a a'
						 'b b c c'
						 'd d e e ';
	.imgbox{
		image{width: 100%;height: 90px;}
	}
	
	.list-course-item:nth-child(1){
		grid-area: a;
		image{width: 100%;height: 250px!important;}
	}
	.list-course-item:nth-child(2){grid-area: b;}
	.list-course-item:nth-child(3){grid-area: c;}
	.list-course-item:nth-child(4){grid-area: d;}
	.list-course-item:nth-child(5){grid-area: e;}
}

.cc-course-gridbox{
	display: grid;
	grid-column-gap: 10px;
	grid-template-areas: 'a a b b'
						 'a a c c'
						 'a a c c ';
	.imgbox{
		image{width: 100%;height: 90px;}
	}
	
	.list-course-item:nth-child(1){
		grid-area: a;
		image{width: 100%;height: 350px!important;}
	}
	.list-course-item:nth-child(2){grid-area: b;}
	.list-course-item:nth-child(3){grid-area: c;}
	
}

.cc-coursebox-list-full{
	display: flex;
	flex-wrap: wrap;
	.list-course-item{
		 width: 100%;
		 box-sizing: border-box;
		.imgbox {
			image{width: 100%;border-radius: 6px;}
		}
	}
}

.cc-coursebox-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.list-course-item{
		width: calc(50% - 5px);
		box-sizing: border-box;
		.imgbox {
			image{width: 100%;height:112px;border-radius: 6px;}
		}
	}
}

.cc-coursebox-list-scroll{
	display: flex;
	overflow: scroll;
	.list-course-item{
		min-width: 45%;
		box-sizing: border-box;
		margin-right: 10px;
		.imgbox {
			image{width: 100%;height:112px;border-radius: 6px;}
		}
	}
}

.cc-coursebox-list-normal{
	.list-course-item{
		.titbox{line-height: 1.75;}
		 box-sizing: border-box;
		.imgbox {
			image{width: 148px;height:112px;border-radius: 6px;}
		}
	}
}

/*数字图标*/
.shopcartbox {
		.num {
			border-radius: 50%;
			padding: 0 5px;
			text-align: center;
			line-height: 16px;
			height: 16px;
			font-size: 11px;
			position: absolute;
			left: 10px;
			background: #fc3f5a;
			color: #FFF;
			z-index: 110;
			top: -8px;
		}
	}
	
.line{padding: 0 5px;color:#e9e1e1}	
.tophead{
	/* #ifdef APP */
	right:0;left:0;top:0;z-index:100;position: fixed!important;
	padding-top: 48px;
	/* #endif */
}
.cc-avatar-img{ width:54rpx; height:54rpx; line-height:50rpx; border-width:4rpx !important;  border-radius:50rpx;margin-right: 10px;}
